<template>
  <div class="layout bg-gray">
    <Layout>
      <Header style="position: fixed; width: 100%; z-index: 4;">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <!--<div class="layout-logo"></div>-->
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              首页
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-analytics"></Icon>
              关于我们
            </MenuItem>
            <MenuItem name="3" @click.native="turnToList">
              <Icon type="ios-keypad"></Icon>
              <Dropdown>
                产品中心
                <Icon type="arrow-down-b"></Icon>
                <DropdownMenu slot="list" v-for="(list, i) in classify" :key="i">
                  <DropdownItem>{{list.name}}</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
              联系我们
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Content style="position: relative;z-index: 3">
        <Layout>
          <Content>
            <div class="s_banner">
              <div class="banner_logo">
                <img src="../../assets/images/img_logo.png">
              </div>
            </div>
            <div class="s3">
              <div class="tit">
                <p class="T_font">Business</p>
                <p class="L_font">主要业务</p>
              </div>
            </div>
            <Row style="background:#eee;padding:20px" :gutter="16">
              <Col span="8" v-for="(list, i) in classify" :key="i">
              <Card shadow>
                <div class="txt-center">
                  <img :src="list.imgUrl" alt="">
                  <h3>{{list.name}}</h3>
                </div>
              </Card>
              </Col>
            </Row>
            <div class="bg_1">
              <div class="container">
                <img class="animated fadeInUpNow animation103 fadeInUp" src="../../assets/images//img_t1.png">
              </div>
            </div>
            <Row class="s2" style="background: rgb(240, 240, 240);">
              <Col span="12">
              <div class="tit">
                <p class="L_font">/ 关于我们</p>
                <p class="T_font">ABOUT</p>
              </div>
              </Col>
              <Col span="10">
              <div class="about_company">
                <p>福建中星华宸电子设备有限公司是一家致力于将机器视觉产品、嵌入式机器视觉系统应用于各个领域的高科技公司。</p>
                <p>公司拥有一批技术精湛，在视觉检测领域具有良好专业技术知识的研发团队，为您的企业提高产品质量、消除生产错误、降低制造成本。福建中星华宸以“质量、服务、速度、创新”为己任，秉承客户至上，以人为本的经营理念，为广大企业提供优质的产品和服务。</p>
              </div>
              </Col>
            </Row>
          </Content>
        </Layout>
      </Content>
      <Footer class="layout-footer-center" style="height: 500px">
        <div class="container">

        </div>
        <Row class="footer" style="width: 1000px;left: 50%;margin-left: -500px;">
          <div>
            <Col span="12" style="color: #fff;text-align: left">
            <div class="Con_message">
              <p>姓名</p>
              <Input></Input>
              <p>电话</p>
              <Input></Input>
              <p>邮箱</p>
              <Input></Input>
              <p>内容</p>
              <Input type="textarea"></Input>
              <Button type="primary" icon="ios-checkmark-outline" style="margin-top: 10px">提交</Button>
            </div>
            </Col>
            <Col span="12">
            <div class="Con_info">
              <i class="ivu-icon ivu-icon-social-whatsapp"></i>
              <h3>联系方式</h3>
              <p>电话：17750278638 </p>
              <p>地址：福建省福州市仓山区</p>
              <p style="text-indent: 3rem;">建新镇镜浦路百捷商务中心302</p>
            </div>
            </Col>
            <div style="margin-bottom: 20px;color: #fff">
              Copyright© 2017-2019 福建中星华宸电子设备有限公司
            </div>
          </div>
        </Row>
      </Footer>
    </Layout>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        classify: [{
          name: '工业相机',
          imgUrl: require('../../assets/images/c1.jpg'),
          product: [{
            name: 'Gige 工业相机'
          }, {
            name: 'USB3.0 工业相机'
          }, {
            name: 'USB2.0 工业相机'
          }]
        }, {
          name: '运动控制',
          imgUrl: require('../../assets/images/c1.jpg'),
          product: [{
            name: 'PLC'
          }, {
            name: 'HMI'
          }, {
            name: '整体式控制器'
          }, {
            name: '伺服系统'
          }, {
            name: '变频系统'
          }]
        }, {
          name: '行业案例',
          imgUrl: require('../../assets/images/c1.jpg'),
          product: []
        }],
        value: 0,
        list: [{
          imgUrl: require('../../assets/images/logo.png')
        }, {
          imgUrl: require('../../assets/images/logo.png')
        }, {
          imgUrl: require('../../assets/images/logo.png')
        }]
      }
    },
    mounted () {
    },
    methods: {
      turnToList () {
        this.$router.push({
          name: 'list'
        })
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "../../assets/less/color";
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }
  .layout-nav{
    width: 520px;
    margin: 0 auto;
    margin-right: 20px;
  }
  .layout-footer-center{
    text-align: center;
  }
  .s_banner {
    width: 100%;
    height: 450px;
    /* background: #e9e7e8; */
    background-image: url(../../assets/images/banner_bg.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    .banner_logo {
      padding-top: 6.5rem;
      text-align: center;
    }
  }
  .container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    max-width: 1000px;
  }
  .s2{
    .tit {
      width: 100%;
      height: 100%;
      margin: 8rem auto auto auto;
      /* background-color: #d8d8d8; */
      text-align: right;
      vertical-align: middle;
      .L_font {
        font-family: 微软雅黑;
        font-size: 32px;
        color: #003382;
      }
      .T_font {
        color: rgb(218, 218, 218);
        font-family: 微软雅黑;
        font-size: 6.5rem;
        line-height: 15rem;
      }
    }
  }
  .about_company {
    margin: 5rem 2rem;
    padding: 2rem;
    color: #333;
    background: #fff;
    font-size: 1.1rem;
    vertical-align: middle;
    p {
      font-size: 1rem;
      line-height: 2rem;
      text-indent: 2rem;
    }
  }
  .bg_1 {
    width: 100%;
    height: 325px;
    background: url(../../assets/images/bg_1.jpg) fixed;
    background-position: top left;
    background-repeat: no-repeat;
    img {
      width: 100%;
      padding-top: 5.5rem;
      vertical-align: middle;
    }
  }
  .bg_2 {
    width: 100%;
    height: 325px;
    background: url(../../assets/images/bg_2.jpg) fixed;
    background-position: top left;
    background-repeat: no-repeat;
    img {
      width: 100%;
      padding-top: 5.5rem;
      vertical-align: middle;
    }
  }
  .s3{
    .tit {
      padding: 5rem 0;
      text-align: center;
      background: #f1f1f1;
      .T_font {
        color: rgb(146, 148, 167);
        font-size: 1.2rem;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 3rem;
      }
      .L_font {
        width: 120px;
        margin: auto;
        border-top: 1px solid #CCC;
        color: rgb(48, 48, 83);
        font-size: 30px;
        font-family: 微软雅黑;
        line-height: 4rem;
      }
    }
  }
  .footer{
    position: fixed;
    z-index: 1;
    bottom: 0;
    width: 100%;
    .Con_message {
      margin: 1rem 2rem;
      p {
        line-height: 2.5rem;
        font-size: .9rem;
      }
    }
    .Con_info {
      margin: 5rem 2rem;
      padding: 1rem;
      border: 1px solid #e7e7e7;
      background-color: #fff;
      text-align: center;
      i{
        font-size: 3rem;
        color: @Primary;
        line-height: 3rem;
      }
      &>h3{
        line-height: 3.5rem;
        border-bottom: 1px dashed #CCC;
      }
      &>p{
        line-height: 2.5rem;
        text-align: left;
      }
    }
  }
  .ivu-layout-footer{
    background: #495060 !important;
  }
</style>
